<template>
  <div class="about">
    <h1>所在班级考勤</h1>
  </div>
  <div>为哪条课表进行考勤</div>
  <select>
    <option v-for="c in curriculums" value="{{ c.id }}">{{ cAlias(c) }}</option>

  </select>
  <div>并带出本班同学信息</div>

  <table>
    <thead>
      <tr>
        <th>学号</th>
        <th>姓名</th>
        <th>出勤状况</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="s in students">
        <td>{{ s.id }}</td>
        <td>{{ s.name }}</td>
        <td><select> 出勤状况选择
            <option value="已签">已签</option>
            <option value="事假">事假</option>
            <option value="公假">公假</option>
            <option value="病假">病假</option>
            <option value="迟到">迟到</option>
            <option value="早退">早退</option>
            <option value="迟到且早退">迟到且早退</option>
            <option value="缺勤">缺勤</option>
          </select></td>
      </tr>
    </tbody>
  </table>

  <button :disabled="codeSent" @click="sendCode">给任课老师发送验证码</button>
  <input :value="code" />
  <button v-show="codeSent && !code.trim()" @click="confirm">代为确认</button>
</template>
<script>

import { mapActions, mapState } from 'pinia'
import { useAttenderStore } from '../../stores/attender'
import { util } from '../../utils'
export default {
  inject: ['axios'],

  methods: {
    ...mapActions(useAttenderStore, ['fetchStudentsByClazzId', 'fetchAvaliableCurriculumsByClazzId', 'confirmAttend']),
    cAlias: (c) => util.curriculumAlias(c),
    sendCode() {
      this.codeSent = !this.codeSent;
      util.curriculumAlias
    },
    confirm() {
      this.confirmAttend(this.students, this.curriculumSelected, this.codeSent).then((attendenceId) => {
        window.alert(`提交成功，考勤表ID为${attendenceId}`);
        //TODO 跳转到考勤表查看界面
      })
    }

  },

  async mounted() {
    let stu_array = await this.fetchStudentsByClazzId();
    stu_array.forEach(s => s.state = '已签');
    this.students = stu_array;
    this.curriculums = await this.fetchAvaliableCurriculumsByClazzId();
  },


  data() {
    /**
     * 哪个班，针对哪条curriculum（什么老师在什么时候给哪个班上的什么课）的签到/
     */
    return {
      curriculumSelected: null,
      students: [],//[{id,name,}]
      curriculums: [],
      codeSent: false,
      code: ''
    }
  },
}
</script>


<style>
@media (min-width: 1024px) {
  .about {
    min-height: 100vh;
    display: flex;
    align-items: center;
  }
}
</style>
